<template>
  <!-- 菜单 -->
  <div class="menu-style">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <!-- usst链接 -->
      <el-link
        href="http://www.usst.edu.cn/"
        target="_blank"
      >
        <img
          id="usst2"
          src="../assets/usst2.jpg"
          alt
        />
      </el-link>
      <div>
        <el-menu-item index="1">
          <router-link to="/">
            <li>首页</li>
          </router-link>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">竞赛</template>
          <el-menu-item>
            我的比赛
          </el-menu-item>

          <el-menu-item>
            寻找队友
          </el-menu-item>

          <el-menu-item @click="contest">
            赛事资讯
          </el-menu-item>
        </el-submenu>

        <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->

        <el-menu-item index="3">
          <el-link :underline="false">历史记录</el-link>
        </el-menu-item>
      </div>
      <div>
        <el-input
          v-model="input"
          placeholder="请搜索输入内容"
          size="small"
          style="padding: 15px;"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search"
        >搜索</el-button>
      </div>
      <div>
        <el-button
          type="danger"
          round
          id="ask"
          @click="question"
        >我要提问！</el-button>
      </div>
      <div v-if=this.islogin>
        <UserLogin></UserLogin>
        <el-badge
          :value="12"
          class="item"
        >
          <el-button size="small">回复</el-button>
        </el-badge>
      </div>
      <Loginning v-else></Loginning>

    </el-menu>
  </div>
</template>

<script>
import UserLogin from '../components/UserLogin.vue'
import Loginning from '../components/Loginning.vue'

export default {
  name: 'Menu',
  components: {
    UserLogin,
    Loginning
  },
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      input: '',
      show: 'false',
      islogin: !!window.sessionStorage.getItem('token')
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    search () {
      this.$router.push('/search')
    },
    question () {
      this.$router.push('/question')
    },
    contest () {
      this.$router.push('/contest')
    }
  }
}
</script>

<style lang = "less" scoped>
.el-menu-demo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 60px;
  width: 1536px;
  div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
  }
}
#usst2 {
  height: 60px;
}
</style>
